import React, { useEffect, useState } from 'react'
import { getSkillList } from '../../services/index'
import { Iskill, IskillListQuery, IskillListItem } from '../../utils/interface.d'
import { Table, Input, Button } from 'antd'
import { Link } from 'umi'
import classNames from 'classnames'
import { EyeOutlined, EnterOutlined, FormOutlined, DeleteOutlined, SendOutlined, SearchOutlined } from '@ant-design/icons'

// 直接引入样式
// import './postskill.less'
// 启用css module
import styles from './postSkill.less'
import { observer } from 'mobx-react-lite'
import useStore from '@/context/useStore'

const status = ['全部', '草稿', '已发布', '待审核', '已驳回']
const columns = [
    {
        title: '岗位名称',
        dataIndex: 'name',
    },
    {
        title: '专业',
        dataIndex: 'majorName',
    },
    {
        title: '版本号',
        dataIndex: 'stationVersion',
    },
    {
        title: '技能数量',
        dataIndex: 'skillNum',
    },
    {
        title: '作者',
        dataIndex: 'username',
    },
    {
        title: '发起时间',
        dataIndex: 'createTime',
    },
    {
        title: '状态',
        render: (row: IskillListItem) => <span className={styles[`status${row.status}`]}>{status[Number(row.status)]}</span>
    },
    {
        title: '操作',
        render: (row: IskillListItem) => {
            if (row.status === '3') {
                return <div className={styles.action}>
                    <EyeOutlined style={{ color: '#00c3ff' }}></EyeOutlined>
                    <EnterOutlined style={{ color: '#00c3ff' }}></EnterOutlined>
                </div>
            }
            else if (row.status === '1') {
                return <div className={styles.action}>
                    <Link to={`/teachers/addPostSkill?stationVersionId=${row.stationVersionId}&see=false`}>
                        <FormOutlined style={{ color: '#00c3ff' }}></FormOutlined>
                    </Link>
                    <SendOutlined style={{ color: '#00c3ff' }}></SendOutlined>
                    <DeleteOutlined style={{ color: '#00c3ff' }}></DeleteOutlined>
                </div>
            }
        }
    },
];
const Postskill: React.FC = () => {
    let [curSkill, setCurSkill] = useState('')
    let [isMyInfo, setMyInfo] = useState(false)
    let [curStatus, setCurStatus] = useState(0)
    let [title, setTitle] = useState('')
    let [searchTitle, setSearchTitle] = useState('')
    let [dataSource, setDateSource] = useState<IskillListItem[]>([])
    let queryParams: IskillListQuery = { isAsc: 'desc', searchTitle: '', pageNum: 0, pageSize: 0, isMyInfo: false }

    let { skill } = useStore()

    // 发起请求获取专业标签
    useEffect(() => {
        skill.getSkillLable()
    }, [])

    // 发起请求获取项目列表
    useEffect(() => {
        // 拼接参数
        if (curStatus) {
            queryParams = { ...queryParams, isMyInfo, searchTitle, majorId: curSkill, status: curStatus }
        }
        else {
            queryParams = { ...queryParams, isMyInfo, searchTitle, majorId: curSkill, status: '' as unknown as number }
        }
        // debugger
        getSkillList(queryParams).then(res => {
            if (res.code === 200) {
                setDateSource(res.rows)
            }
        })
    }, [curSkill, curStatus, isMyInfo, searchTitle])

    return <div className={styles.teachers}>
        <section className={styles.sec}>岗位 / 岗位管理</section>
        <section className={styles.sec1}>
            <section>
                <span>专业：</span>
                <ul className={styles.statusList}>
                    {
                        [{ id: '', name: '全部' }, ...skill.skillLable].map(item => {
                            return <span key={item.id} className={item.id === curSkill ? classNames(styles.span, styles.active) : styles.span} onClick={e => setCurSkill(item.id)}>{item.name}</span>
                        })
                    }
                </ul>
            </section>
            <section>
                <span>状态：</span>
                <ul className="statusList">
                    {
                        status.map((item, index) => {
                            return <span key={index} className={index === curStatus ? classNames(styles.span, styles.active) : styles.span} onClick={e => setCurStatus(index)}>{item}</span>
                        })
                    }
                </ul>
            </section>
        </section>
        <section className={styles.sec2}>
            <div><input type="checkbox" checked={isMyInfo} onChange={e => setMyInfo(e.target.checked)} />只看我的</div>
            <div>
                <Input className={styles.input2} placeholder="搜索岗位" suffix={<SearchOutlined onClick={() => setSearchTitle(title)} />} value={title} onChange={e => setTitle(e.target.value)} onKeyDown={e => {
                    if (e.keyCode === 13) {
                        setSearchTitle(title)
                    }
                }} />
            </div>
            <div>
                <Link to='/teachers/addPostSkill?see=false'>
                    <Button type='primary'>+添加岗位</Button>
                </Link>
            </div>
        </section>

        <Table className={styles.ant_table_wrapper} rowKey='stationId' dataSource={dataSource} columns={columns}></Table>
    </div>
}

export default observer(Postskill)
